<template>
    <a-config-provider :locale="zhCN">
        <a-layout>
            <a-layout-sider :width="left" class="sider">
                <HeaderView />
                <SearchInput />
                <SearchList />
                <TreeList />
            </a-layout-sider>
            <div class="moveBar" :style="{'left' : left - 2 +'px'}" @mousedown="mousedown($event)"></div>
            <a-layout :class="{'ContentView' : !store.tabs.list.length}">
                <Content />
            </a-layout>
        </a-layout>
    </a-config-provider>
</template>
<script setup>

import zhCN from 'ant-design-vue/es/locale/zh_CN';
import HeaderView from './compontents/header/HeaderView.vue';
import SearchInput from './compontents/search/SearchInput.vue'
import SearchList from './compontents/search/SearchList.vue'
import TreeList from './compontents/tree/TreeList.vue'
import Content from './compontents/content/TabsView.vue'

import { provide, reactive, readonly, ref, } from 'vue';
import { useStore } from './libs/store'
const store = useStore();

// store.getData('http://192.168.11.55:30427/swagger/frassessment/index.html');


// 拖动条控制左右分块大小
const left = ref(300);
const mousedown = () => {
    document.body.style.cursor = 'col-resize';
    document.onmousemove = (event) => {
        let _left = event.clientX;
        if (_left < 250) {
            _left = 250
        } else if (_left > document.body.clientWidth - 500) {
            _left = document.body.clientWidth - 500
        }
        left.value = _left;
    };
    document.onmouseup = () => {
        document.body.style.cursor = '';
        document.onmousemove = null;
        document.onmouseup = null;
    };
}

</script>

<style scoped>
.ContentView {
    background-image: url(./assets/title.png);
    background-repeat: no-repeat;
    background-position: center center;
}

.ant-layout {
    height: 100%;
}

.sider {
    transition: none;
    position: relative;
}

.moveBar {
    height: 100%;
    position: absolute;
    top: 0;
    width: 5px;
}
.moveBar::after {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.moveBar:active {
    background: rgba(0, 0, 0, 0.3);
}
.moveBar:hover {
    background: rgba(0, 0, 0, 0.3);
    cursor: col-resize;
}
</style>